<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>index</title>
<link rel="stylesheet" type="text/css" href="style/base.css">
<link rel="stylesheet" type="text/css" href="style/index.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jQueryColor.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="js/jQeasing.js"></script>
<script type="text/javascript">
	$(function(){
			var container = $('.waterfull ul');
			var loading=$('#imloading');
			loading.data("on",true);
			function tores(){
				var tmpWid=$(window).width();
				if(tmpWid>1280){
					tmpWid=1280;
				}else{
					var column=Math.floor(tmpWid/320);
					tmpWid=column*320;
				}
				$('.waterfull').width(tmpWid);
			}
			tores();
			$(window).resize(function(){
				tores();
			});
			container.imagesLoaded(function(){
			  container.masonry({
				columnWidth: 320,
				itemSelector : '.item',
				isFitWidth: true,
				isAnimated: true,
				isRTL:false,
				isResizable: true,
				animationOptions: {
					duration: 800,
					easing: 'easeInOutBack',
					queue: false
				}
			  });
			});
			var sqlJson=[{'title':'师大正大坊','intro':'江西师范大学是教育部、江西省人民政府共建高校和中西部高校基础能力建设工程高校。学校融文学、历史学、哲学、经济学、管理学、法学~','src':'学校照片/正大坊.jpg','writer':'荣燊','date':'谢谢浏览','looked':321},
			{'title':'师大正大门','intro':'江西师范大学是教育部、江西省人民政府共建高校和中西部高校基础能力建设工程高校。学校融文学、历史学、哲学、经济学、管理学、法学~','src':'学校照片/正门.jpg','writer':'荣燊','date':'谢谢浏览','looked':321},
			{'title':'师大二桥侧门','intro':'江西师范大学是教育部、江西省人民政府共建高校和中西部高校基础能力建设工程高校。学校融文学、历史学、哲学、经济学、管理学、法学~','src':'学校照片/侧门.jpg','writer':'荣燊','date':'谢谢浏览','looked':321},
			{'title':'师大图书馆','intro':'江西师范大学是教育部、江西省人民政府共建高校和中西部高校基础能力建设工程高校。学校融文学、历史学、哲学、经济学、管理学、法学~','src':'学校照片/图书馆.jpg','writer':'荣燊','date':'谢谢浏览','looked':321}];
			$(window).scroll(function(){
				if(!loading.data("on")) return;
				var itemNum=$('#waterfull').find('.item').length;
				var itemArr=[];
				itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
				itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
				itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
				var maxTop=Math.max.apply(null,itemArr);
				if(maxTop<$(window).height()+$(document).scrollTop()){
					loading.data("on",false).fadeIn(800);
					(function(sqlJson){
						if(itemNum>15){
							loading.text('就有这么多了！');
						}else{
							var html="";
							for(var i in sqlJson){
								html+="<li class='item'><a href='####' class='a-img'><img src='"+sqlJson[i].src+"'></a>";
								html+="<h2 class='li-title'>"+sqlJson[i].title+"</h2>";
								html+="<p class='description'>"+sqlJson[i].intro+"</p><div class='qianm clearfloat'>";
								html+="<span class='sp1'><b>"+sqlJson[i].looked+"</b>浏览</span>";
								html+="<span class='sp2'>"+sqlJson[i].writer+"</span><span class='sp3'>"+sqlJson[i].date+"&nbsp;By</span></div></li>";		
							}
							var time=setTimeout(function(){
								$(html).find('img').each(function(index){
									loadImage($(this).attr('src'));
								})
								var $newElems = $(html).css({ opacity: 0}).appendTo(container);
								$newElems.imagesLoaded(function(){
									$newElems.animate({ opacity: 1},800);
									container.masonry( 'appended', $newElems,true);
									loading.data("on",true).fadeOut();
									clearTimeout(time);
								});
							},800)
						}
					})(sqlJson);
				}
			});
			function loadImage(url) {
				 var img = new Image(); 
				  img.src = url;
				  if (img.complete) {
					 return img.src;
				  }
				  img.onload = function () {
					return img.src;
				  };
			 };
			 loadImage('images/one.jpeg',test());
			var rbgB=['#71D3F5','#F0C179','#F28386','#8BD38B'];
			$('#waterfull').on('mouseover','.item',function(){
				var random=Math.floor(Math.random() * 4);
				$(this).stop(true).animate({'backgroundColor':rbgB[random]},1000);
			});
			$('#waterfull').on('mouseout','.item',function(){
				$(this).stop(true).animate({'backgroundColor':'#fff'},1000);
			});
	})
</script>
</head>
<body>
	<div class="content">
		<div class="waterfull clearfloat" id="waterfull">
			<ul>
				<li class="item">
					<a href="####" class="a-img">
						<img src="学校照片/侧门.jpg" alt="" width="211" height="292">					</a>
				  <h2 class="li-title" title="学校照片/侧门">师大美景</h2>
					<p class="description">江西师范大学是教育部、江西省人民政府共建高校和中西部高校基础能力建设工程高校。学校融文学、历史学、哲学、经济学、管理学、法学~</p>
					<div class="qianm clearfloat">
						<span class="sp1"><b>  </b>  </span>
						<span class="sp2">  </span>
						<span class="sp3">  &nbsp;  </span>
					</div>
				</li>
<li class="item">
					<a href="####" class="a-img">
						<img src="学校照片/镜湖.jpg" alt="" height="223">					</a>
		<h2 class="li-title" title="学校照片/镜湖">师大美景</h2>
					<p class="description">江西师范大学是教育部、江西省人民政府共建高校和中西部高校基础能力建设工程高校。学校融文学、历史学、哲学、经济学、管理学、法学~</p>
					<div class="qianm clearfloat">
						<span class="sp1"><b>   </b>  </span>
						<span class="sp2">   </span>
						<span class="sp3">  &nbsp;   </span>
					</div>
				</li>
  <li class="item">
					<a href="####" class="a-img">
						<img src="学校照片/图书馆.jpg"alt="">
						
					</a>
					<h2 class="li-title" title="学校照片/图书馆">师大美景</h2>
					<p class="description">江西师范大学是教育部、江西省人民政府共建高校和中西部高校基础能力建设工程高校。学校融文学、历史学、哲学、经济学、管理学、法学~</p>
					<div class="qianm clearfloat">
						<span class="sp1"><b>   </b>  </span>
						<span class="sp2">  </span>
						<span class="sp3">   &nbsp;   </span>
					</div>
				</li>
				<li class="item">
					<a href="####" class="a-img">
						<img src="学校照片/图书馆2.jpg" alt="">
						
					</a>
					<h2 class="li-title" title="学校照片/图书馆">师大美景</h2>
					<p class="description">江西师范大学是教育部、江西省人民政府共建高校和中西部高校基础能力建设工程高校。学校融文学、历史学、哲学、经济学、管理学、法学~</p>
					<div class="qianm clearfloat">
						<span class="sp1"><b>  </b>   </span>
						<span class="sp2">   </span>
						<span class="sp3">   &nbsp;  </span>
					</div>
				</li>
				<li class="item">
					<a href="####" class="a-img">
						<img src="学校照片/图书馆3.jpg" alt="">
						
					</a>
					<h2 class="li-title" title="学校照片/图书馆">师大美景</h2>
					<p class="description">江西师范大学是教育部、江西省人民政府共建高校和中西部高校基础能力建设工程高校。学校融文学、历史学、哲学、经济学、管理学、法学~</p>
					<div class="qianm clearfloat">
						<span class="sp1"><b>   </b>   </span>
						<span class="sp2">   </span>
						<span class="sp3">  &nbsp;   </span>
					</div>
				</li>
				<li class="item">
					<a href="####" class="a-img">
						<img src="学校照片/唯一楼.jpg" alt="">	
					</a>
					<h2 class="li-title" title="学校照片/唯一楼">师大美景</h2>
					<p class="description">江西师范大学是教育部、江西省人民政府共建高校和中西部高校基础能力建设工程高校。学校融文学、历史学、哲学、经济学、管理学、法学~</p>
					<div class="qianm clearfloat">
						<span class="sp1"><b>  </b>   </span>
						<span class="sp2">   </span>
						<span class="sp3">   &nbsp;   </span>
					</div>
				</li>
				<li class="item">
					<a href="####" class="a-img">
						<img src="学校照片/学校徽章.jpg" alt="">
						
					</a>
					<h2 class="li-title" title="学校照片/学校徽章">师大美景</h2>
					<p class="description">江西师范大学是教育部、江西省人民政府共建高校和中西部高校基础能力建设工程高校。学校融文学、历史学、哲学、经济学、管理学、法学~</p>
					<div class="qianm clearfloat">
						<span class="sp1"><b>  </b>  </span>
						<span class="sp2">  </span>
						<span class="sp3">  &nbsp;  </span>
					</div>
				</li>
				<li class="item">
					<a href="####" class="a-img">
						<img src="学校照片/运动会.jpg"alt="">
						
					</a>
					<h2 class="li-title" title="学校照片/运动会">师大美景</h2>
					<p class="description">江西师范大学是教育部、江西省人民政府共建高校和中西部高校基础能力建设工程高校。学校融文学、历史学、哲学、经济学、管理学、法学~</p>
					<div class="qianm clearfloat">
						<span class="sp1"><b>   </b>   </span>
						<span class="sp2">   </span>
						<span class="sp3">   &nbsp;   </span>
					</div>
				</li>
			</ul>
		</div>
		<div id="imloading" style="width:150px;height:30px;line-height:30px;font-size:16px;text-align:center;border-radius:3px;opacity:0.7;background:#000;margin:10px auto 30px;color:#fff;display:none">
			I'm Loading.....
		</div>
	</div>
	<div style="text-align:center;">
<p>江西师大官网：<a href="http://www.jxnu.edu.cn" target="_blank">师大首页</a></p>
</div>

</body>
</html>